body{
    width: 100%;
    height: 100%;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
.header{
   background: darkslateblue;
   width: 100%;
   .px2rem(height,820);
   color: #fff;
   h3{
       .px2rem(font-size,40);
       text-align: center;
       padding-top: 30%;
   }
   p{
     .px2rem(font-size,30);
      text-align: center; 
      padding: 14%; 
   }
}
.anniu{
    width: 100%;
    display: flex;
    p{
        padding: 5%;
        img{
            .px2rem(width,150);
            .px2rem(height,140);
        }
    }
    .an{
       .px2rem(width,156);
       .px2rem(height,156);
       border: 1px solid green;
       border-radius: 50%; 
       margin: 4% 11%;
       #btn{
           .px2rem(width,140);
           .px2rem(height,140);
           border-radius: 50%;
           background: green;
           margin: 4%;
           border: none;
           outline:none
       }
    }
}
.caozuo{
  width: 100%;
  padding-bottom: 30%;
  ul{
      display: flex;
      justify-content: space-around;
      li{
          width: 30%;
          .px2rem(font-size,40);
          color: #ccc;
          text-align: center;
          color: green;
      }
  }
  
}
.tail{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #FFFFFF;
     width: 100%;
    ul{
        display: flex;      
        li{
            width: 20%;          
            padding: 3%;  
            img{
              .px2rem(width,90);
              .px2rem(height,78);
                 
            }
        }
    }
}
.mv{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
   .mv-top{  
    .px2rem(height,80);   
    display: flex;
    background: #fff;
   
    span{
        margin-left: 1%;
        img{
            .px2rem(width,27);
            .px2rem(height,37);
           margin-top: 50%;
            
        }
    }
    h3{
        flex: 1;
        .px2rem(font-size,40);
        margin-top: 3%;
        text-align: center;
    }
    p{
        .px2rem(font-size,36);
        .px2rem(width,180);
        .px2rem(height,60);
        border: 1px solid #ccc;
        text-align: center;
        border-radius: 25px;
        line-height: 30px;
        margin-top: 1%;
        margin-right: 1%;
        color: #CCCCCC;
       
    }
 }
.shuru{
    width: 100%;
    .px2rem(height,100);
    background: #CCCCCC;
    #txt{
        .px2rem(width,570);
        .px2rem(height,78);
        border-radius: 8px;
        margin-left: 3%;
        margin-top: 1%;
    }
    span{
        color: green;
        .px2rem(font-size,40);
        padding-left: 4%;
        
    }
} 
.xuanxiang{
    background: #fff;
    width: 100%;
    .px2rem(height,500);
    dl{
        width: 16%;
        float: left;
        text-align: center;
        margin: 2%;
        dt{
            padding: 2%;
            img{
                .px2rem(width,63);
                .px2rem(height,81);
            }
        }
        dd{ 
            padding: 2%;
            .px2rem(font-size,26);
            font-weight: 600;
        }
    }
} 
.tuicun{
    width: 100%;
    background: #FFF;
    .px2rem(height,400);
    margin-top: -1%;
    border-bottom: 1px solid #000000;
    .tu-top{
      width: 100%;
      display: flex;
      .px2rem(height,100); 
      p{
          .px2rem(font-size,38);
          font-weight: 600;
          padding: 2%;
      } 
    }
 .bofang{
     width: 100%;
     margin-top: -4%;
     .px2rem(height,240);
     .bo-left{
         width: 30%;
         float: left;
         img{
             .px2rem(width,207);
             .px2rem(height,190);
             padding: 4%;
         }
     }
     h3{
         .px2rem(font-size,40);
         color: #ccc;
         width: 70%;
         float: left;
         margin-top: 1%;
     }
     .guan1{
        .px2rem(font-size,32);
         color: #ccc;
         width: 70%;
         float: left;
        
     }
     .guan2{
       .px2rem(font-size,32);
       color: #ccc;
       width: 70%;
       float: left;
      
       span{
           .px2rem(width,200);
           .px2rem(height,100);                    
           padding-left: 40%;
           color: green;
       }   
     }
    }   
   
  }
  
}

.fanchang{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    display: none;
    .qu{
       width: 100%;
       display: flex;
       .px2rem(height,110);
       span{
           .px2rem(font-size,38);
           padding: 3%;
       }
       #txt{
           .px2rem(width,570);
           .px2rem(height,78);
            border-radius: 8px;
            margin-left: 3%;
            margin-top: 1%;
            background: #eee;
       } 
    }
.leixing{
    width: 100%;
    .px2rem(height,60);
    border-bottom: 1px solid #ccc;
    ul{
        display: flex;
        justify-content: space-around;
        li{
            width: 22%;
            text-align: center;
            line-height: 25px;
            .px2rem(font-size,38);
        }
    }
    ul li:hover{
        border-bottom: 3px solid green;
    }
    .gesh{
       border-bottom: 3px solid green; 
    }
}   
    .gebang{
        width: 100%;
        .ge-top{
           p{
               .px2rem(font-size,38);
               font-weight: 600;
               padding: 4%;
           }
        }
     .gechang{
         width: 100%;
         .px2rem(height,265);
         .ge-left{
             width: 30%;
             float: left;
        
             img{
                 .px2rem(width,207);
                 .px2rem(height,210);
                 padding: 4%;
             }
         }
        .huang{
            .px2rem(font-size,40);      
             width: 70%;
             float: left;
             margin-top: 1%;
             span{
                 .px2rem(padding-left,100);
             }
         }
         .dian{
            .px2rem(font-size,32);      
             width: 70%;
             float: left;
             color: #ccc;
             .spn1{
               .px2rem(padding-left,100);  
             }
             .spn2{
               .px2rem(padding-left,100);  
             }   
         }
         .sy{
            .px2rem(font-size,32);
            color: green;
            float: left;  
         }
     }   
                   
    }   
 
}
.geshou{
    position: absolute;
    top: 18%;
    left: 0;
    background: #fff;
    display: none;
  .singer{   
    .celebrity-top{
        width: 100%;
        .px2rem(height,90);       
        p{
         .px2rem(font-size,32); 
         font-weight: 600;
         padding-left: 3%;
         line-height: 40px;  
        }
       
    }
     dl{
        width: 25%;
        float: left;
        text-align: center;
        dt{
            padding: 3%;
            img{             
              .px2rem(width,135);
              .px2rem(height,135);                 
            }
        }
        dd{
          .px2rem(font-size,28);
           font-weight: 500;       
        }
    }
    
  }
.language{
    width: 100%;
    .px2rem(height,100);
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #ccc;
    display: flex;
    p{
        .px2rem(font-size,42);
        padding: 3%;
        width: 100%;
    }
 } 
  
}
.fenlei{
    position: absolute;
    top: 18%;
    left: 0;
    background: #fff;
    width: 100%;
    display: none;
    .fen-top{
        width: 100%;
        .px2rem(height,270);
        margin-top: 2%;
        .zuo{
            width: 30%;
            float: left;
            img{
                .px2rem(width,230);
                .px2rem(height,270);
                padding: 3%;
            }
        }
        .you{
            width: 70%;
            float: left;
            margin-top: 3%;
             p{             
              .px2rem(font-size,38);
              padding: 1%; 
              span{
                  .px2rem(font-size,30);
                  color: #ccc;
                  padding-left: 8%;
              } 
            }
        }
       
    }
}
.dianji{
    position: absolute;
    top: 18%;
    left: 0;
    background: #fff;
    width: 100%;
    .px2rem(height,850);
    display: none;
    img{
        
        .px2rem(width,370);
        .px2rem(height,220);
        margin: 20% 25% 6%;
        
    }
    p{
      .px2rem(font-size,34);
      text-align: center;
      color: #ccc;  
    }
}

















